<template>
  <div class="setrole">
    <!-- 分配角色弹窗 -->
    <el-dialog
      :title="'为 [' + roleName + '] 分配角色'"
      @close="cancel"
      :visible="showPermDialog"
    >
      <!-- check-strictly  在显示复选框的情况下，是否严格的遵循父子不互相关联的做法 -->
      <!-- default-expand-all 是否默认展开所有节点 -->
      <!-- default-checked-keys	默认勾选的节点的 key 的数组 -->
      <!-- node-key	每个树节点用来作为唯一标识的属性，整棵树应该是唯一的 -->
      <el-tree
        ref="mytree"
        :data="list"
        :props="{ label: 'name' }"
        show-checkbox
        check-strictly
        default-expand-all
        expand-on-click-node
        node-key="id"
      />
      <div slot="footer" class="dialog-footer" style="text-aligin: center">
        <el-button @click="submit" type="primary">确 定</el-button>
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getAllPermissionApi } from '@/api/permission'
import { getRoleByIdApi, sysRoleAssignPremApi } from '@/api/role.js'
export default {
  props: ['showPermDialog', 'id'],
  data () {
    return {
      roleName: '人事经理',
      list: [], //树形结构数据源
      roleDetail: {} //当前角色的详情
    }
  },
  methods: {
    //得到角色对应的权限列表
    async getRolePermission (id) {
      const res = await getRoleByIdApi(id)
      //得到当前角色的详情
      this.roleDetail = res
      //将默认权限设置到tree中
      this.$refs.mytree.setCheckedKeys(res.permIds)
      //setCheckedKeys: 通过 keys 设置目前勾选的节点，使用此方法必须设置 node-key 属性
    },
    //得到所有数据
    async getpremisson () {
      const res = await getAllPermissionApi()
      this.list = this.turnData(res, '0')
    },
    // 将数据转为树状结构
    turnData (arr, pid) {
      var newArr = []
      arr.forEach(item => {
        if (item.pid === pid) {
          item.children = this.turnData(arr, item.id)
          newArr.push(item)
        }
      })
      return newArr
    },

    //分配权限
    async submit () {
      //getCheckedKeys: 若节点可被选择（即 show-checkbox 为 true），则返回目前被选中的节点的 key 所组成的数组
      var ids = this.$refs.mytree.getCheckedKeys()
      await sysRoleAssignPremApi({
        id: this.roleDetail.id,
        permIds: ids
      })
      this.$emit('update:showPermDialog', false)
      this.$message.success('设置成功')
    },
    cancel () {
      // 关闭面板
      this.$emit('update:showPermDialog', false)
    }
  },
  created () {
    this.getpremisson()
  }
}
</script>

<style></style>
